<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-form inline :model="form" ref="form" label-width="90px" size="small">
      <el-form-item label="商户编号：">
        <el-input v-model="form.number"></el-input>
      </el-form-item>
      <el-form-item label="公司名称：">
        <el-input v-model="form.name" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="所属代理商：">
        <el-select v-model="form.agent_name" placeholder="全部" clearable filterable>
          <el-option v-for="item in options"
            :key="item.agent_num"
            :label="item.agent_name"
            :value="item.agent_num">
          </el-option>
        </el-select>
        
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="success" icon="el-icon-search" @click="handleClickSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    
    <el-row> 
      <el-table size="small" :data="date" v-loading="loading" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="merchant_num" label="商户编号"></el-table-column>
        <el-table-column align="center" prop="full_name" label="公司名称"></el-table-column>
        <el-table-column align="center" prop="agent_name" label="所属代理商"></el-table-column>
        <el-table-column align="center" prop="real_address" label="店铺地址"></el-table-column>
        <el-table-column align="center" prop="leader_name" label="负责人"></el-table-column>
        <el-table-column align="center" prop="update_at" label="申请时间"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClickGoTo(scope.row.merchant_num)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="total, prev, pager, next, jumper" :total="page.total" :page-size="page.size" :current-page.sync="page.current" @current-change="handleChangeCurrent" class="fr mt20"></el-pagination>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { auditBaseInit, auditBasePage, auditBaseSearch, CommerGetAgent } from '@/api/shop'
import { mapGetters } from 'vuex'

export default {
  name: 'auditBase',
  components: {
    Breadcrumb
  },
  data() {
    return {
      loading: true,
      options: [],
      date: [],
      page: {
        size: 0,
        total: 0,
        current: 1
      },
      form: {
        number: '',
        name: '',
        agent_name: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  methods: {
    handleDocumentInit() {
      auditBaseInit(this.id).then(res => {
        if (res.data.errorCode === 0) {
          this.page.total = res.data.result.total
          this.page.size = res.data.result.per_page
          this.date = res.data.result.data
          this.loading = false
        } else {
          this.$message.error(res.data.errorMsg)
          this.loading = false
        }
      })
      CommerGetAgent(this.id).then(res => {
        if (res.data.errorCode === 0) {
          this.options = res.data.result
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleChangeCurrent(v) {
      this.loading = true
      auditBasePage(this.id, v, this.form).then(res => {
        if (res.data.errorCode === 0) {
          this.page.total = res.data.result.total
          this.page.size = res.data.result.per_page
          this.page.current = res.data.result.current_page
          this.date = res.data.result.data
          this.loading = false
        } else {
          this.$message.error(res.data.errorMsg)
          this.loading = false
        }
      })
    },
    handleClickSearch() {
      this.loading = true
      auditBaseSearch(this.id, this.form).then(res => {
        if (res.data.errorCode === 0) {
          this.page.total = res.data.result.total
          this.page.size = res.data.result.per_page
          this.page.current = res.data.result.current_page
          this.date = res.data.result.data
          this.loading = false
        } else {
          this.$message.error(res.data.errorMsg)
          this.loading = false
        }
      })
    },
    handleClickGoTo(v) {
      this.$router.push({ name: 'ReviewBase', query: { merchant_num: v }})
    }
  },
  created() {
    this.handleDocumentInit()
  }
}
</script>